﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AddAmigos.ascx.cs" Inherits="Voluntariar.WEB.Controls.AddAmigos" %>
<style type="text/css">
    DIV.list_item_container
    {
        height: 90px;
        padding: 5px;
    }
    DIV.image
    {
        width: 90px;
        height: 80px;
        float: left;
    }
    DIV.description
    {
        font-style: italic;
        font-size: 0.8em;
        color: gray;
    }
</style>
<script type="text/javascript">

    j(document).ready(function () {

        RegistrarAutoComplete();


        var usuarios = [];
        function Usuarios(id, nome, image) {
            this.id = id;
            this.label = nome;
            this.value = nome;
            this.image = image;
        }
        j("[id$=txtPesquisaAmigos]").autocomplete({
            source: usuarios,
            minLength: 3,
            select: function (event, ui) {

            }
        }).data("autocomplete")._renderItem = function (ul, item) {
            if (item.image == "NoImage") {
                var inner_html = '<a>' +
                                                    '<div class="list_item_container">' +
                                                        '<div class="image">' +
                                                            '<img src=http://localhost:1419/ImagemUsuarios/missing.jpg onclick=SubmitFrm(' + item.id + ') style="width: 30px;height: 30px;">' +
                                                        '</div>' +
                                                        '<div>' +
                                                            '<asp:Label id="lblLinkUser" onclick=SubmitFrm(' + item.id + ') >' + item.label + '</asp:Label> ' +
                                                        '</div>' +
                                                    '</div>' +
                                                  '</a>';
            }
            else {
                var inner_html = '<a>' +
                                                    '<div class="list_item_container">' +
                                                        '<div class="image">' +
                                                                '<img src=http://localhost:1419/ImagemUsuarios/' + item.image + ' onclick=SubmitFrm(' + item.id + ') style="width: 30px;height: 30px;">' +
                                                        '</div>' +
                                                        '<div class="label">' +
                                                            '<asp:Label id="lblLinkUser" onclick=SubmitFrm(' + item.id + ') >' + item.label + '</asp:Label> ' +
                                                        '</div>' +
                                                    '</div>' +
                                                  '</a>';
            }

            return $("<li></li>")
                        .data("item.autocomplete", item)
                        .append(inner_html)
                        .appendTo(ul);
        };


    });

    function SubmitFrm(int) {
        window.location = "http://localhost:1419/DetalhesUserVisualizacao.aspx?userID=" + int;
    }

    //Funcao que registra o autoComplete da especificação
    function RegistrarAutoComplete() {

        j("[id$=txtPesquisaAmigos]").keyup(function () {
            if (j("[id$=txtPesquisaAmigos]").val().length > 1) {
                var usuarios = [];
                function Usuarios(id, nome, image) {
                    this.id = id;
                    this.label = nome;
                    this.value = nome;
                    this.image = image;
                }
                j.ajax({
                    url: "/Include/Handler/AutoCompleteBuscaUsuarios.ashx",
                    dataType: "xml",
                    data: { q: j("[id$=txtPesquisaAmigos]").val(), p: j("[id$=hdnUsuarioID]").val() },
                    success: function (xmlResponse) {
                        j(xmlResponse).find("Usuario").each(function () {
                            var id = j(this)[0].attributes[0].value;
                            var nome = j(this)[0].attributes[1].value;
                            var image = j(this)[0].attributes[2].value;
                            var objUsuarios = new Usuarios(id, nome, image);
                            usuarios.push(objUsuarios);
                        });
                        j("[id$=txtPesquisaAmigos]").autocomplete({
                            source: usuarios,
                            minLength: 3,
                            select: function (event, ui) {

                            }
                        })
                        .data("autocomplete")._renderItem = function (ul, item) {
                            if (item.image == "NoImage") {
                                var inner_html = '<a>' +
                                                    '<div class="list_item_container">' +
                                                        '<div class="image">' +
                                                            '<img src=http://localhost:1419/ImagemUsuarios/missing.jpg onclick=SubmitFrm(' + item.id + ') style="width: 30px;height: 30px;">' +
                                                        '</div>' +
                                                        '<div>' +
                                                            '<asp:Label id="lblLinkUser" onclick=SubmitFrm(' + item.id + ') >' + item.label + '</asp:Label> ' +
                                                        '</div>' +
                                                    '</div>' +
                                                  '</a>';
                            }
                            else {
                                var inner_html = '<a>' +
                                                    '<div class="list_item_container">' +
                                                        '<div class="image">' +
                                                                '<img src=http://localhost:1419/ImagemUsuarios/' + item.image + ' onclick=SubmitFrm(' + item.id + ') style="width: 30px;height: 30px;">' +
                                                        '</div>' +
                                                        '<div class="label">' +
                                                            '<asp:Label id="lblLinkUser" onclick=SubmitFrm(' + item.id + ') >' + item.label + '</asp:Label> ' +
                                                        '</div>' +
                                                    '</div>' +
                                                  '</a>';
                            }

                            return $("<li></li>")
                        .data("item.autocomplete", item)
                        .append(inner_html)
                        .appendTo(ul);
                        };
                    }
                });
            }
        });

    }
</script>
<asp:HiddenField runat="server" ID="hdnUsuarioID" />
<asp:TextBox runat="server" ID="txtPesquisaAmigos" Style="width: 300px; height: 25px;"></asp:TextBox>
